<template>
    <div class="toast" v-if="state" :class="showContent ?'fadein':'fadeout'">{{message}}</div>
</template>
<script>
    export default {
      data () {
        return {
          state: true,
          showContent:true, 
          message: '',
        }
      }
    }
</script> 

  <style scoped>
    .toast{    
      position: fixed;    
      left: 50%;    
      top:50%;    
      background: rgba(0,0,0,.35);    
      padding: 10px 20px;    
      border-radius: 5px;    
      transform: translate(-50%,-50%);    
      color:#fff;
      font-size: 0.75rem;
    }  
    .fadein {    
      animation: animate_in 0.25s;
    }  
    .fadeout {    
      animation: animate_out 0.25s;    
      opacity: 0;
    }
    @keyframes animate_in {
      0% {      
        opacity: 0;
      }
      100%{      
        opacity: 1;
      }
    }
    @keyframes animate_out {
      0% {      
        opacity: 1;
      }
      100%{      
        opacity: 0;
      }
    }
  </style>